<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="hero">
          <h1>欢迎使用 AI-SOES 智能考试系统</h1>
          <p>基于人工智能的在线考试解决方案</p>
          <div class="actions">
            <el-button type="primary" size="large" @click="$router.push('/login')">
              立即登录
            </el-button>
            <el-button size="large" @click="$router.push('/register')">
              注册账号
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="features">
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><Edit /></el-icon>
              <span>智能出题</span>
            </div>
          </template>
          <p>基于AI技术的自动题目生成，支持多种题型</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><Monitor /></el-icon>
              <span>在线考试</span>
            </div>
          </template>
          <p>稳定的在线考试环境，实时监控防作弊</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon><DataAnalysis /></el-icon>
              <span>智能评分</span>
            </div>
          </template>
          <p>AI辅助的自动评分系统，快速准确</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// Home页面逻辑
</script>

<style scoped>
.home {
  padding: 20px;
}

.hero {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px;
  margin-bottom: 40px;
}

.hero h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.2em;
  margin-bottom: 30px;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.features {
  margin-top: 40px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
}
</style>